<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>药品盘点</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no" name="format-detection">
    <meta name="x5-fullscreen" content="true">
    <meta name="full-screen" content="yes">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_363663_xo7863s0yfmbzkt9.css"
          th:href="@{http://at.alicdn.com/t/font_363663_xo7863s0yfmbzkt9.css}">
    <link rel="stylesheet" href="plugins/weui/weui.min.css" th:href="@{/static/plugins/weui/weui.min.css}">
    <link rel="stylesheet" href="plugins/jquery-weui/css/jquery-weui.css" th:href="@{/static/plugins/jquery-weui/css/jquery-weui.css}">
    <link rel="stylesheet" href="plugins/swiper/css/swiper.min.css" th:href="@{/static/plugins/swiper/css/swiper.min.css}">
    <link rel="stylesheet" href="css/style.css" th:href="@{/static/css/style.css}">
    <!--basis script-->
    <script src="plugins/adaptive.js/adaptive.js" th:src="@{/static/plugins/adaptive.js/adaptive.js}"></script>
    <script src="plugins/jquery/jquery.min.js" th:src="@{/static/plugins/jquery/jquery.min.js}"></script>
    <script src="plugins/weui/weui.js" th:src="@{/static/plugins/weui/weui.js}"></script>
    <script src="plugins/jquery-weui/js/jquery-weui.min.js"
            th:src="@{/static/plugins/jquery-weui/js/jquery-weui.min.js}"></script>
    <script src="plugins/fastclick/fastclick.js" th:src="@{/static/plugins/fastclick/fastclick.js}"></script>
    <script src="plugins/vue/vue.js" th:src="@{/static/plugins/vue/vue.js}"></script>
    <script src="plugins/vue/axios.min.js" th:src="@{/static/plugins/vue/axios.min.js}"></script>
    <script src="plugins/vue/ajax-tool.js" th:src="@{/static/plugins/vue/ajax-tool.js}"></script>
</head>
<body>

<div class="header">
    <div class="search-wrap">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form" onsubmit="return false;">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" placeholder="搜索" required="" id="searchtext">
                    <a href="javascript:" class="weui-icon-clear" id="searchclear"></a>
                </div>
                <label class="weui-search-bar__label">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form>
            <a href="#" class="weui-search-bar__cancel-btn" id="searchcancel">取消</a>
        </div>
    </div>
</div>
<div class="filter-wrap ui-border-b">
    <ul class="filter-ul">
        <li><a>名称</a></li>
        <li><a>数量</a></li>
        <li><a>编码</a></li>
        <li><a>货位号</a></li>
    </ul>
</div>
<div class="view has-navbar">
    <div class="page" id="inventory">
        <div class="history-list yy-list" id="list">
            <a href="#" class="weui-panel weui-panel_access my-panel" v-for="item in druglist" @click="redict(item)">
                <div class="weui-panel__hd">{{item.gn}}|{{item.wn}}</div>
                <div class="weui-form-preview my-preview">
                    <div class="weui-form-preview__bd">
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">规格</label>
                            <span class="weui-form-preview__value">{{item.spr}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">产地</label>
                            <span class="weui-form-preview__value">{{item.made}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">货位号</label>
                            <span class="weui-form-preview__value">{{item.midcl}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">单位</label>
                            <span class="weui-form-preview__value">{{item.utr}}</span>
                        </div>
                        <div class="weui-form-preview__item">
                            <label class="weui-form-preview__label">数量</label>
                            <span class="weui-form-preview__value">{{item.stksum}}</span>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        <div class="weui-loadmore">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>
    </div>
</div>
<!--scripts-->
<script src="js/main.js"></script>
<script>
    $(function () {
        var inventory = new Vue({
            el: '#inventory',
            data: {
                scontent: '',
                page: 0,
                druglist: [],
                asc: '',
                sortindex: ''
            },
            methods: {
                searchdrugs: function () {
                    //TODO 查询药品系统库存
                    console.info('查询初始药品系统库存列表')
                    let res = []
                    ajaxsync({
                        url: '/mph/mr/stk?drugName='+this.scontent+'&page='+this.page+'&ord='+this.sortindex+'&asc='+this.asc,
                        method: 'get',
                        datajson: null,
                        succ: function (data) {
                            res = data.stk
                        }
                    })
                    return res

                },
                search: function () {
                    console.info('搜索功能')
                    //TODO 搜索功能
                    this.page = 0
                    let drugs = this.searchdrugs();
                    this.druglist.splice(0, this.druglist.length)
                    this.druglist = this.druglist.concat(drugs)
                },

                redict: function (druginfo) {
                    console.info('页面跳转：'+JSON.stringify(druginfo))
                    druginfo.realquan = druginfo.quan
                    sessionStorage.removeItem('drugstk')
                    sessionStorage.setItem('drugstk', JSON.stringify(druginfo))
                    location.href = 'inventory-detail.html'
                }
            }
        })

        var sortindex = 0

        //每次点击 触发设置class
        $('.filter-ul li').click(function(){
            let index = $(this).index();
            inventory.sortindex = index
            let aa = orclick(index)
        //    $(this).attr('class', 'up')
            console.info($(this))
            if(aa == 'up'){
                inventory.asc = 'asc'
            }else if(aa == 'down'){
                inventory.asc = 'desc'
            }else{
                inventory.asc = ''
            }
            inventory.search()

        })
        
        function orclick(index) {
            let ful = $('.filter-ul li')
            let cname = $(ful[index]).attr('class')
            for(let i=0; i<ful.length; i++){
                $(ful[i]).attr('class', '')
            }
            console.info(cname)
            if(cname == '' || cname == undefined){
                $(ful[index]).attr('class', 'up')
                return 'up'
            }else if(cname == 'up'){
                $(ful[index]).attr('class', 'down')
                return 'down'
            }else if(cname == 'down'){
                $(ful[index]).attr('class', '')
                return ''
            }
        }


        //初始化药品列表
        function instance(){
            inventory.page = 0
            let drugs = inventory.searchdrugs();
            inventory.druglist.splice(0, inventory.druglist.length)
            inventory.druglist = inventory.druglist.concat(drugs)
        }
        instance()

        //搜索
        weui.searchBar('#searchBar');

        $('#searchtext').bind('input propertychange', function() {
            console.info('search start')
            inventory.scontent = $('#searchtext').val()
            inventory.search()
            console.info('search end')
        });

        $('#searchcancel').click(function () {
            console.info('search cancel start')
            inventory.scontent = ''
            inventory.search()
            console.info('search cancel end')
        })

        $('#searchclear').click(function () {
            inventory.scontent = ''
            inventory.search()
        })


        // 滑动加载
        var loading = false;  //状态标记
        $('.view').infinite().on("infinite", function () {
            if (loading) return;
            loading = true;
            setTimeout(function () {
                inventory.page += 1
                let drugs = inventory.searchdrugs();
                inventory.druglist = inventory.druglist.concat(drugs)
                loading = false;
            }, 1000);   //模拟延迟
        });
    })
</script>
</body>
</html>
